import React, { useState } from 'react';
import './AIAnalysis.css';

const AIAnalysis = ({ isVisible, subtitle, analysis, isAnalyzing, onClose, onRefresh, onWordClick }) => {
  const [activeTab, setActiveTab] = useState('translation');

  if (!isVisible || !analysis || !subtitle) return null;

  const renderVocabulary = () => {
    if (!analysis.vocabulary || analysis.vocabulary.length === 0) {
      return <p className="no-content">暂无词汇解释</p>;
    }

    return (
      <div className="vocabulary-list">
        {analysis.vocabulary.map((item, index) => (
          <div key={index} className="vocabulary-item">
            <div className="word-header">
              <span className="word" onClick={() => onWordClick && onWordClick(item.word)}>
                {item.word}
              </span>
            </div>
            <div className="word-explanation">
              {item.explanation}
            </div>
          </div>
        ))}
      </div>
    );
  };

  const renderPoints = () => {
    if (!analysis.points || analysis.points.length === 0) {
      return <p className="no-content">暂无语法要点</p>;
    }

    return (
      <div className="points-list">
        {analysis.points.map((point, index) => (
          <div key={index} className="point-item">
            <span className="point-bullet">•</span>
            <span className="point-text">{point}</span>
          </div>
        ))}
      </div>
    );
  };

  const renderExamples = () => {
    if (!analysis.examples || analysis.examples.length === 0) {
      return <p className="no-content">暂无相关例句</p>;
    }

    return (
      <div className="examples-list">
        {analysis.examples.map((example, index) => (
          <div key={index} className="example-item">
            <div className="example-en">{example.en || example}</div>
            {example.zh && <div className="example-zh">{example.zh}</div>}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="ai-analysis-overlay" onClick={onClose}>
      <div className="ai-analysis-modal" onClick={e => e.stopPropagation()}>
        <div className="analysis-header">
          <h3>🎓 AI智能解析</h3>
          <div className="header-actions">
            <button 
              className="refresh-btn"
              onClick={onRefresh}
              disabled={isAnalyzing}
              title="重新分析"
            >
              {isAnalyzing ? '⏳' : '🔄'}
            </button>
            <button className="close-btn" onClick={onClose}>×</button>
          </div>
        </div>

        <div className="analysis-content">
          <div className="original-text">
            <div className="text-label">原文：</div>
            <div className="text-content">{subtitle.text}</div>
          </div>

          <div className="analysis-tabs">
            <button 
              className={`tab-btn ${activeTab === 'translation' ? 'active' : ''}`}
              onClick={() => setActiveTab('translation')}
            >
              📝 翻译
            </button>
            <button 
              className={`tab-btn ${activeTab === 'grammar' ? 'active' : ''}`}
              onClick={() => setActiveTab('grammar')}
            >
              🔍 语法
            </button>
            <button 
              className={`tab-btn ${activeTab === 'vocabulary' ? 'active' : ''}`}
              onClick={() => setActiveTab('vocabulary')}
            >
              📚 词汇
            </button>
            <button 
              className={`tab-btn ${activeTab === 'points' ? 'active' : ''}`}
              onClick={() => setActiveTab('points')}
            >
              💡 要点
            </button>
            <button 
              className={`tab-btn ${activeTab === 'examples' ? 'active' : ''}`}
              onClick={() => setActiveTab('examples')}
            >
              📖 例句
            </button>
          </div>

          <div className="tab-content">
            {activeTab === 'translation' && (
              <div className="translation-content">
                <div className="translation-text">
                  {analysis.translation || '翻译暂不可用'}
                </div>
              </div>
            )}

            {activeTab === 'grammar' && (
              <div className="grammar-content">
                <div className="grammar-text">
                  {analysis.grammar || '语法分析暂不可用'}
                </div>
              </div>
            )}

            {activeTab === 'vocabulary' && renderVocabulary()}
            {activeTab === 'points' && renderPoints()}
            {activeTab === 'examples' && renderExamples()}
          </div>
        </div>

        <div className="analysis-footer">
          <p>💡 点击词汇可获取详细解释 • 🔄 点击刷新按钮重新分析</p>
        </div>
      </div>
    </div>
  );
};

export default AIAnalysis;